.parent_frame {
    width: 350px;
    height: 250px;
    background-color: #403e41;
    display: flex;
    justify-content: center;
    align-items: center;
}

.child_frame {
    width: 80px;
    height: 80px;
    background-color: #5ab041;
}

.flex_box_container {
    width: 375px;
    height: 300px;
    background-color: #3c393a;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    color: #ffffff;
    font-size: 14px;
}

.demo1 .flex_parent_box {
    width: 300px;
    height: 200px;
    background-color: #494949;
    display: flex;
    align-items: center;
    justify-content: center;
}

.demo1 .flex_child_box {
    width: 80px;
    height: 80px;
    background-color: #73b451;
    display: flex;
    align-items: center;
    justify-content: center;
}

.demo2 .flex_parent_box {
    width: 300px;
    height: 200px;
    background-color: #494949;
    display: flex;
    justify-content: flex-start;
}

.demo2 .flex_child_box1 {
    width: 100px;
    height: 80px;
    background-color: #5088ad;
    display: flex;
    align-items: center;
    justify-content: center;
}

.demo2 .flex_child_box2 {
    width: 80px;
    height: 90px;
    background-color: #73b451;
    display: flex;
    align-items: center;
    justify-content: center;
}

.demo2 .flex_child_box3 {
    width: 70px;
    height: 100px;
    background-color: #c78b48;
    display: flex;
    align-items: center;
    justify-content: center;
}

.demo3 .flex_parent_box {
    width: 300px;
    height: 200px;
    background-color: #494949;
    display: flex;
    justify-content: flex-end;
}

.demo3 .flex_child_box1 {
    width: 100px;
    height: 80px;
    background-color: #5088ad;
    display: flex;
    align-items: center;
    justify-content: center;
}

.demo3 .flex_child_box2 {
    width: 80px;
    height: 90px;
    background-color: #73b451;
    display: flex;
    align-items: center;
    justify-content: center;
}

.demo3 .flex_child_box3 {
    width: 70px;
    height: 100px;
    background-color: #c78b48;
    display: flex;
    align-items: center;
    justify-content: center;
}

.demo4 .flex_parent_box {
    width: 300px;
    height: 200px;
    background-color: #494949;
    display: flex;
    justify-content: center;
}

.demo4 .flex_child_box1 {
    width: 100px;
    height: 80px;
    background-color: #5088ad;
    display: flex;
    align-items: center;
    justify-content: center;
}

.demo4 .flex_child_box2 {
    width: 80px;
    height: 90px;
    background-color: #73b451;
    display: flex;
    align-items: center;
    justify-content: center;
}

.demo4 .flex_child_box3 {
    width: 70px;
    height: 100px;
    background-color: #c78b48;
    display: flex;
    align-items: center;
    justify-content: center;
}

.demo5 .flex_parent_box {
    width: 300px;
    height: 200px;
    background-color: #494949;
    display: flex;
    justify-content: space-around;
}

.demo5 .flex_child_box1 {
    width: 100px;
    height: 80px;
    background-color: #5088ad;
    display: flex;
    align-items: center;
    justify-content: center;
}

.demo5 .flex_child_box2 {
    width: 80px;
    height: 90px;
    background-color: #73b451;
    display: flex;
    align-items: center;
    justify-content: center;
}

.demo5 .flex_child_box3 {
    width: 70px;
    height: 100px;
    background-color: #c78b48;
    display: flex;
    align-items: center;
    justify-content: center;
}

.demo6 .flex_parent_box {
    width: 300px;
    height: 200px;
    background-color: #494949;
    display: flex;
    justify-content: space-between;
}

.demo6 .flex_child_box1 {
    width: 100px;
    height: 80px;
    background-color: #5088ad;
    display: flex;
    align-items: center;
    justify-content: center;
}

.demo6 .flex_child_box2 {
    width: 80px;
    height: 90px;
    background-color: #73b451;
    display: flex;
    align-items: center;
    justify-content: center;
}

.demo6 .flex_child_box3 {
    width: 70px;
    height: 100px;
    background-color: #c78b48;
    display: flex;
    align-items: center;
    justify-content: center;
}

.demo7 .flex_parent_box {
    width: 300px;
    height: 200px;
    background-color: #494949;
    display: flex;
    align-items: flex-start;
}

.demo7 .flex_child_box1 {
    width: 100px;
    height: 80px;
    background-color: #5088ad;
    display: flex;
    align-items: center;
    justify-content: center;
}

.demo7 .flex_child_box2 {
    width: 80px;
    height: 90px;
    background-color: #73b451;
    display: flex;
    align-items: center;
    justify-content: center;
}

.demo7 .flex_child_box3 {
    width: 70px;
    height: 100px;
    background-color: #c78b48;
    display: flex;
    align-items: center;
    justify-content: center;
}

.demo8 .flex_parent_box {
    width: 300px;
    height: 200px;
    background-color: #494949;
    display: flex;
    align-items: flex-end;
}

.demo8 .flex_child_box1 {
    width: 100px;
    height: 80px;
    background-color: #5088ad;
    display: flex;
    align-items: center;
    justify-content: center;
}

.demo8 .flex_child_box2 {
    width: 80px;
    height: 90px;
    background-color: #73b451;
    display: flex;
    align-items: center;
    justify-content: center;
}

.demo8 .flex_child_box3 {
    width: 70px;
    height: 100px;
    background-color: #c78b48;
    display: flex;
    align-items: center;
    justify-content: center;
}

.demo9 .flex_parent_box {
    width: 300px;
    height: 200px;
    background-color: #494949;
    display: flex;
    align-items: center;
}

.demo9 .flex_child_box1 {
    width: 100px;
    height: 80px;
    background-color: #5088ad;
    display: flex;
    align-items: center;
    justify-content: center;
}

.demo9 .flex_child_box2 {
    width: 80px;
    height: 90px;
    background-color: #73b451;
    display: flex;
    align-items: center;
    justify-content: center;
}

.demo9 .flex_child_box3 {
    width: 70px;
    height: 100px;
    background-color: #c78b48;
    display: flex;
    align-items: center;
    justify-content: center;
}

.demo10 .flex_parent_box {
    width: 300px;
    height: 200px;
    background-color: #494949;
    display: flex;
    align-items: stretch;
}

.demo10 .flex_child_box1 {
    width: 100px;
    background-color: #5088ad;
    display: flex;
    align-items: center;
    justify-content: center;
}

.demo10 .flex_child_box2 {
    width: 80px;
    background-color: #73b451;
    display: flex;
    align-items: center;
    justify-content: center;
}

.demo10 .flex_child_box3 {
    width: 70px;
    background-color: #c78b48;
    display: flex;
    align-items: center;
    justify-content: center;
}

.demo11 .flex_parent_box {
    width: 300px;
    height: 200px;
    background-color: #494949;
    display: flex;
}

.demo11 .flex_child_box1 {
    background-color: #5088ad;
    flex-grow: 1;

    display: flex;
    align-items: center;
    justify-content: center;
}

.demo11 .flex_child_box2 {
    background-color: #73b451;
    flex-grow: 2;

    display: flex;
    align-items: center;
    justify-content: center;
}

.demo11 .flex_child_box3 {
    background-color: #c78b48;
    flex-grow: 4;

    display: flex;
    align-items: center;
    justify-content: center;
}


.demo12 .flex_parent_box {
    width: 300px;
    height: 200px;
    background-color: #494949;
    display: flex;
}

.demo12 .flex_child_box1 {
    background-color: #5088ad;
    width: 120px;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;
}

.demo12 .flex_child_box2 {
    background-color: #73b451;
    width: 120px;
    flex-shrink: 1;

    display: flex;
    align-items: center;
    justify-content: center;
}

.demo12 .flex_child_box3 {
    background-color: #c78b48;
    width: 120px;
    flex-shrink: 1;

    display: flex;
    align-items: center;
    justify-content: center;
}


.demo13 .flex_parent_box {
    width: 300px;
    height: 200px;
    background-color: #494949;
    display: flex;
}

.demo13 .flex_child_box1 {
    background-color: #5088ad;
    flex-basis: 100px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.demo13 .flex_child_box2 {
    background-color: #73b451;
    flex-basis: 80px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.demo13 .flex_child_box3 {
    background-color: #c78b48;
    flex-basis: 70px;

    display: flex;
    align-items: center;
    justify-content: center;
}




.demo14 .flex_parent_box {
    width: 300px;
    height: 200px;
    background-color: #494949;
    display: flex;
    align-items: center;
}

.demo14 .flex_child_box1 {
    width: 100px;
    height: 80px;
    background-color: #5088ad;

    align-self: flex-start;
    display: flex;
    align-items: center;
    justify-content: center;
}

.demo14 .flex_child_box2 {
    width: 80px;
    height: 90px;
    background-color: #73b451;

    align-self: flex-end;

    display: flex;
    align-items: center;
    justify-content: center;
}

.demo14 .flex_child_box3 {
    width: 70px;
    height: 100px;
    background-color: #c78b48;
    align-self: center;

    display: flex;
    align-items: center;
    justify-content: center;
}
